<template>
  <div class="auth-container">
    <h2>用户注册</h2>
    <form @submit.prevent="handleRegister">
      <div class="form-group">
        <label>用户名</label>
        <input v-model="user.username" type="text" required>
      </div>
      <div class="form-group">
        <label>密码</label>
        <input v-model="user.password" type="password" required>
      </div>
      <button type="submit">注册</button>
    </form>
    <p>已有账号？<router-link to="/login">去登录</router-link></p>
    <div v-if="message" :class="['message', success ? 'success' : 'error']">
      {{ message }}
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      user: {
        username: '',
        password: ''
      },
      message: '',
      success: false
    }
  },
  methods: {
    async handleRegister() {
      try {
        const response = await axios.post('http://47.108.137.238:8081/register', this.user)
        this.message = response.data.message
        this.success = response.data.success
        if (response.data.success) {
          setTimeout(() => {
            this.$router.push('/login')
          }, 1500)
        }
      } catch (error) {
        this.message = error.response?.data?.message || '注册失败'
        this.success = false
      }
    }
  }
}
</script>
  
  <style scoped>
  .auth-container {
    max-width: 400px;
    margin: 2rem auto;
    padding: 2rem;
    border: 1px solid #ddd;
    border-radius: 8px;
  }
  
  .form-group {
    margin-bottom: 1rem;
  }
  
  input {
    width: 100%;
    padding: 0.5rem;
    margin-top: 0.5rem;
  }
  
  button {
    width: 100%;
    padding: 0.75rem;
    background: #42b983;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .message {
    margin-top: 1rem;
    padding: 0.5rem;
    border-radius: 4px;
  }
  
  .success {
    background: #d4edda;
    color: #155724;
  }
  
  .error {
    background: #f8d7da;
    color: #721c24;
  }
  </style>